<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no,maximum-scale=1">
    <title>组态websocket 示例</title>
    <style>
        textarea,input,button {
            width: 300px;height: 40px;font-size: 20px;
            margin: 5px;
        }
    </style>
    <script src="./test.js"></script>
</head>
<body>
<p id="url" style="font-size: 16px;"></p>
<!--<textarea type="text" id="message" rows="10">54-00-02-001,54-00-02-002</textarea><br>-->
<!--<button onclick="addSub()">订阅变量</button><br>-->
<!--<button onclick="removeSub()">移除订阅变量</button><br>-->
<!--<button onclick="getSub()">获取已订阅变量</button><br>-->
<!--<button onclick="project_list()">工程列表</button><br>-->
<script src="../../src/js/axios.min.js"></script>
<script>
    console.log("global_config = ",window.global_config)
    function getQueryParam(paramName) {
        const url = window.location.href;
        const regex = new RegExp(`[?&]${paramName}(=([^&#]*)|&|#|$)`);
        const results = regex.exec(url);

        if (!results) return null;
        if (!results[2]) return '';

        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    axios.defaults.headers.common['Authorization'] = 'a928cff1d986743eea3aceade7c201f4';

    let socket;
    let msgEl = document.getElementById("message")
    // let speedEl = document.getElementById("speed")
    let url = getQueryParam("ws_addr")
    let ws_url = "ws://" + url + "/echo";
    document.getElementById("url").innerText = ws_url;
    function connectWebSocket() {
        socket = new WebSocket(ws_url);
        socket.onopen = function (res) {
            console.log("连接成功");
        }
        socket.onclose = function (e) {
            console.log("WebSocket closed");
        }
        socket.onerror = function (err) {
            console.log("WebSocket error")
        }
        socket.onmessage = function(e) {
            // console.log("响应原始数据",e.data);
            // console.log("响应数据",JSON.parse(e.data))
            let obj = JSON.parse(e.data)
            if(obj.code === 2) {
                obj.data = JSON.parse(obj.data)
            }
            console.log("响应数据",obj)

            // if(obj.data.length >= 4) {
            //     console.log(obj.data[0])
            //     console.log(obj.data[1])
            //     console.log(obj.data[2])
            //     console.log(obj.data[3])
            // }
        };
    }
    
    // 启动 WebSocket 连接
    connectWebSocket();

    function addSub() {
        // console.log(msgEl.value);
        let data = {
            type: 100, // 订阅变量
            data: msgEl.value
        }
        socket.send(JSON.stringify(data))
    }
    
    function removeSub() {
        let data = {
            type: 101, // 移除订阅变量
            data: msgEl.value
        }
        socket.send(JSON.stringify(data))
    }
    function getSub() {
        let data = {
            type: 102, // 查看已订阅变量
            data: ""
        }
        socket.send(JSON.stringify(data))
    }

    // function project_list() {
    //     axios.post("http://192.168.1.15:9200/admin/project/list", {
    //         page: 1,
    //         size: 10
    //     }).then(res => {
    //         if(res.status !== 200) {
    //             alert("请求失败");
    //             return
    //         }
    //         res = res.data
    //         console.log("res.data",res);
    //
    //     }).catch(err => {
    //         console.log(err);
    //     })
    // }
</script>
</body>
</html>
